<template>
  <div class="card">
    <div class="my_title">
      {{title_bar}}
    </div>
    <div class="wrap_item">
      <div class="txt c_flex">任务</div>
      <van-progress class="prograss" :pivot-text="String(in_data.completed_task)"
        color="linear-gradient(90deg, rgba(244, 157, 46, 1) , rgba(236, 104, 21, 1))"
        pivot-color="rgba(236, 104, 21, 1)" :percentage="100" stroke-width="12" />

    </div>
    <div class="wrap_item">
      <div class="txt c_flex">完成</div>
      <van-progress class="prograss" :pivot-text="String(in_data.completed_task)"
        color="linear-gradient(90deg, rgba(255, 235, 59, 1) , rgba(35, 217, 80, 1))" pivot-color="rgba(35, 217, 80, 1)"
        :percentage="in_data.task_progress" stroke-width="12" />

    </div>
    <div class="wrap_item">
      <div class="txt c_flex">完成率</div>
      <van-progress class="prograss" :pivot-text="in_data.task_progress_text"
        color="linear-gradient(90deg, rgba(21, 184, 254, 1) , rgba(90, 69, 235, 1))" pivot-color="rgba(90, 69, 235, 1)"
        :percentage="in_data.task_progress" stroke-width="12" />

    </div>
  </div>
</template>

<script>
  export default {
    name:"PrograssCard",
    props:{
      title_bar:String,
      in_data:{
        type:Object,
        default:()=> {}
      }
    },
  }
</script>

<style lang="less" scoped>
  /deep/.van-progress {
    border-radius: 12px;
  }

  /deep/.van-progress__pivot {
    border-radius: 0px;
    border-bottom-right-radius: 12px;
    border-top-right-radius: 12px;
  }

  .card {
    width: 702px;
    height: 230px;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 16px;
    margin: 30px auto;
    padding: 32px;

    .my_title {
      color: rgba(51, 51, 51, 1);
      font-size: 20px;
    }

    .wrap_item {
      display: flex;
      margin: 20px auto 0;

      .txt {
        width: 20%;
        color: rgba(51, 51, 51, 1);
        font-size: 20px;
      }

      .prograss {
        flex: 1
      }
    }
  }
</style>